<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function Child(props) {
        console.log(props);
        const { count, setCount } = props;
        return (
          <div>
            <h2>Child组件count:{count}</h2>
            <button
              onClick={() => {
                setCount((x) => x + 1);
              }}
            >
              按钮
            </button>
          </div>
        );
      }

      function App() {
        const [count, setCount] = React.useState(0);
        return (
          <div>
            <h1>App组件</h1>
            <hr />
            <Child count={count} setCount={setCount} />
          </div>
        );
      }

      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
